<template>
  <div>
      <div class="header">
    <div class="header-l">
      <van-icon name="arrow-left" size="0.25rem" color="#3072f6" class="icon1" />
      <!-- 此处跳转城市界面 -->
      <a href="#">
        <p>北京
        <van-icon name="arrow-down" size="0.1rem" color="#666" class="icon2" />
      </p>
      </a>
      </div>

    <div class="header-c">
      <img src="https://s2.ljcdn.com/mensa/static/m/images/common/logo_beikezhaofang.png?id=20180504&version=g14rir9l9b" class="logo">
    </div>

    <div class="header-r">
      <van-icon name="contact" size="0.25rem" color="#3072f6" class="icon3"/>
    </div>
    </div>


    <div class="welcom">
      <van-icon name="contact" size="0.4rem" color="#fff" class="icon4"/>
    </div>


  </div>




</template>

<script>

import Vue from 'vue'
import { Icon } from 'vant';
Vue.use(Icon);
export default {

}
</script>

<style lang='stylus' scoped>

// 顶部导航栏
a
  color #000
.header
  height 0.5rem 
  display flex
  justify-content space-between
  padding 0.1rem 0.2rem

.header-l
  display flex
  line-height 0.3rem
  position relative
  width 0.9rem


.logo
  height 0.3rem

.icon1
  margin-top 0.05rem
  margin-right 0.18rem
.icon2
  position absolute
  top 0.11rem


.icon3
  float right
 

.header-r
  padding 0.05rem 0
  width 0.9rem

// 蓝色欢迎部分
.welcom
    width 100%
    height 2rem
    background-color #3072f6

</style>